<template>
  <!-- 
    由CategoryList抽离
    这个组件现在只代表一个独立的卡片（Grid Item）。
    它不再关心外层的布局是 grid 还是 flex。
    padding (p-2) 被移到这里，作为卡片与网格单元格之间的间距。
  -->
  <div class="p-2" @click="handleDetail">
    <div
      class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 flex md:block h-full"
    >
      <!-- 图片容器 -->
      <div class="flex-shrink-0 w-2/5 md:w-full">
        <img
          :src="item.photo"
          :alt="item.title"
          class="w-full h-full md:h-48 object-cover bg-gray-200 dark:bg-gray-700"
          :style="{ aspectRatio: item.photoWidth / item.photoHeight }"
        />
      </div>

      <!-- 文字内容容器 -->
      <div class="flex flex-col justify-between p-4 flex-1">
        <div>
          <!-- 作者信息 -->
          <div class="flex items-center mb-2">
            <img :src="item.avatar" alt="author avatar" class="w-6 h-6 rounded-full mr-2" />
            <span class="text-sm font-semibold text-gray-700 dark:text-gray-300 truncate">{{ item.author }}</span>
          </div>
          <!-- 标题 -->
          <h3 class="text-base font-bold text-gray-900 dark:text-white mb-2 line-clamp-2">
            {{ item.title }}
          </h3>
        </div>

        <!-- 标签 -->
        <div v-if="item.tags && item.tags.length" class="mt-2">
          <div class="flex flex-wrap gap-1">
            <span
              v-for="tag in item.tags.slice(0, 3)"
              :key="tag"
              class="px-2 py-0.5 bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs font-medium rounded-full"
            >
              #{{ tag }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PexelsItem } from '@/types/index.js';
import { useRouter } from 'vue-router';
import { usePexelsStore } from '@/store/modules/pexels'

const pexelsStore = usePexelsStore();

const router = useRouter();

const props = defineProps<{
  item: PexelsItem;
}>();

const handleDetail = () =>{
  pexelsStore.setItemDetail(props.item)
  router.push({
    name:"PexelsDetail",
    query:{
      type:"home"
    }
  })
}
</script>
